import PanelRight from '../../../../../common/PanelRight';
import { useState, useEffect, useContext, useRef } from 'react';
import { resourcePath } from '../../../../../../utils/resource';
import { CloseOutlined, DownOutlined } from '@ant-design/icons';
import { Button, Descriptions, Skeleton, Avatar, Divider, Dropdown, InputNumber, List, Radio, Space, Table, Select } from 'antd';
import useBusinessMap from '../../../../../common/BusinessMap';
import LittleTitle from '../../../../../common/LittleTitle';
import './index.less'
import JcyjApi from '../../../../../../utils/apis/JcyjApi';
import ScrollTable from '../../../../../common/ScrollTable';
import VirtualList from 'rc-virtual-list';
import yellowPng from './images/黄色预警.gif';
import redPng from './images/红色预警.gif';
import orgPng from './images/橙色预警.gif';
import bluePng from './images/蓝色预警.gif';
import FetchHelper from '../../../../../../utils/helper/fetch-helper';
import ResponseData from '../../../../../../utils/helper/response-data';
import Static from 'ol/source/ImageStatic';
import InfiniteScroll from 'react-infinite-scroll-component';

export default function Yujinmsg(props) {

    //const [showModel, setShowModel] = useState(true);
    const {activeKey,setOpen}=props;
    const handleClose = () => {
        setOpen(false)
        //setShowModel(false);
    }
    const [total, setTotal] = useState();
    const [datas, setDatas] = useState(null);
    const [params, setParams] = useState({
        pageNum: 1,
        pageSize: 5
    });
   
  
  console.log(activeKey)
    useEffect(()=>{
        JcyjApi.yhlb_find(activeKey).then(resp=>{
            setDatas(resp.data);
            console.log(resp.data)
        })
    },[activeKey])

    // const handleChange = (value) => {
    //     console.log(`selected ${value}`);
    // }


    return <>
        (
            <PanelRight>
                <div style={{
                    width: 350,
                    position: "absolute",
                    right: 30,
                    top: 30,
                    bottom: 30,
                    background: 'rgba(1,15,31,0.5)',
                    pointerEvents: 'auto',
                    overflow:'auto',
                    borderRadius: 8,
                    zIndex: 2,
                    height:'71%'
                }} className="layout-v">
                    <div style={{
                        fontSize: 20,
                        fontWeight: "bold",
                        marginBottom: 12
                    }} className='layout-h center'>
                        <div className='fill w0'>
                            <div style={{
                                background: `url(${resourcePath.blockTitleBg})`,
                                height: 36,
                                backgroundSize: '100% 100%',
                                fontSize: 18,
                                lineHeight: '36px',
                                paddingLeft: 12,
                                fontWeight: "bold",
                                overflow: "hidden"
                            }}>
                       {activeKey}预警
                            </div>
                        </div>
                        <div>
                            <Button size="small" icon={<CloseOutlined />} style={{
                            }} onClick={handleClose} />
                        </div>
                    </div>
                    <div className='fill h0 layout-v '>
                        <div className='fill h0 layout-v'>
                            <LittleTitle>
                                <span style={{
                                    marginRight: 80
                                }}>等级概要</span>

                            </LittleTitle>
                            <div className='fill h0' style={{
                                padding: 12,
                            }} >
                                <div className='yujin-li'>
                                    <ul>
                                        <li>
                                            <img src={redPng} alt='' />
                                            <span>
                                                {datas?.find(data => {return data.jbys==='红色'})?.number}
                                            </span>
                                            <p>红色预警</p>
                                        </li>
                                        <li>
                                            <img src={orgPng} alt='' />
                                            <span>{datas?.find(data => { return data.jbys === '橙色' })?.number}</span>
                                            <p>橙色预警</p>
                                        </li>
                                        <li>
                                            <img src={yellowPng} alt='' />
                                            <span>
                                                {datas?.find(data =>{return data.jbys==='黄色'})?.number}
                                            </span>
                                            <p>黄色预警</p>
                                        </li>
                                        <li>
                                            <img src={bluePng} alt='' />
                                            <span>{datas?.find(data => { return data.jbys === '蓝色' })?.number}</span>
                                            <p>蓝色预警</p>
                                        </li>
                                    </ul>
                                </div>
                              

                            </div>
                        </div>
                    </div>

                </div>
            </PanelRight>

        )
        

    </>

}